<template>
	<a-modal width="80%" destroyOnClose :footer="null" destoryOnClose :visible="visible" :confirmLoading="confirmLoading"
		@cancel="handleCancel">
		<h2 style="text-align: center;margin-bottom: 20px;">消耗月报表</h2>
		<!-- <a-date-picker :allowClear="false" placeholder="请选择年份" mode="year" v-model:value="year" format="YYYY" :open="isOpen" @panelChange="handlePanelChange" @openChange="isOpen = true" /> -->
		<a-select v-model="year" placeholder="请选择年份" style="width: 200px" @change="handleChangeYear">
			<a-select-option :disabled='item.disable' :value="item.value" v-for="item in yearList" :key="item.value">
				{{ item.label }}
			</a-select-option>
		</a-select>
		<a-button type="primary" @click="handleSubmit" style="margin-left: 20px;">查询</a-button>
		<a-table :loading="confirmLoading" :dataSource="dataSource" :columns="columns" bordered style="margin-top: 10px;"
			:pagination="pageParma" @change="handleChange" />
	</a-modal>
</template>

<script>
import { dosageTable, dosageYearTable } from '@/api/modular/main/emsModel/emsModel'
import moment from 'moment';
export default {
	data() {
		return {
			visible: false,
			confirmLoading: false,
			columns: [
				{ title: ' ', key: 'materialCode', dataIndex: 'materialCode' },
				{ title: '月份', key: 'materialName', dataIndex: 'materialName' },
				{ title: '1月', key: 'oneNumber', dataIndex: 'oneNumber' },
				{ title: '2月', key: 'twoNumber', dataIndex: 'twoNumber' },
				{ title: '3月', key: 'threeNumber', dataIndex: 'threeNumber' },
				{ title: '4月', key: 'fourNumber', dataIndex: 'fourNumber' },
				{ title: '5月', key: 'fiveNumber', dataIndex: 'fiveNumber' },
				{ title: '6月', key: 'sixNumber', dataIndex: 'sixNumber' },
				{ title: '7月', key: 'sevenNumber', dataIndex: 'sevenNumber' },
				{ title: '8月', key: 'eightNumber', dataIndex: 'eightNumber' },
				{ title: '9月', key: 'nineNumber', dataIndex: 'nineNumber' },
				{ title: '10月', key: 'tenNumber', dataIndex: 'tenNumber' },
				{ title: '11月', key: 'elevenNumber', dataIndex: 'elevenNumber' },
				{ title: '12月', key: 'twelveNumber', dataIndex: 'twelveNumber' },
				{ title: '本年度总量', key: 'totalNumber', dataIndex: 'totalNumber' }
			],
			dataSource: [],
			pageParma: {
				current: 1,
				pageSize: 21,
				total: null
			},
			year: '',
			yearList: [],
			isOpen: false,
			ids: [],
			total: null
		}
	},
	methods: {
		handlePanelChange(value) {
			this.year = moment(value);
			this.isOpen = false;
		},

		handleChangeYear(e) {
			this.year = e
		},
		async init(data) {
			this.ids = data
			this.yearList = this.createYearList()
			this.year = [String(new Date().getFullYear())]
			this.visible = true
			this.getList()
		},
		async handleSubmit() {
			this.pageParma = {
				current: 1,
				pageSize: 21,
				total: null
			}
			this.getList()
		},
		async getList() {
			this.dataSource = []
			this.confirmLoading = true
			let data = {
				materialIds: this.ids,
				year: this.year.toString()
			}
			let header = [(await dosageYearTable(data)).data];
			console.log(header);
			
			// this.dataSource.push(header);
			let page = JSON.parse(JSON.stringify(this.pageParma))
			// page.pageNo = page.current;
			// delete page.current;
			// delete page.total;
			let { totalRows, rows } = (await dosageTable(data, {
				pageNo: page.current,
				pageSize: 20
			})).data
			console.log(totalRows);
			console.log(rows);
			this.dataSource = rows;
			this.pageParma.total = totalRows;
			console.log(header, this.dataSource);
			
			this.dataSource = header.concat(rows);
			this.confirmLoading = false
		},
		handleChange(pagination) {
			console.log(pagination);
			this.pageParma = pagination;
			this.getList()
		},
		handleCancel() {
			this.visible = false;
			this.pageParma = {
				current: 1,
				pageSize: 21,
				total: null
			}
			this.dataSource = []
		}
	}
}
</script>

<style></style>